import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { useState } from 'react';
import { store } from './index.js'
const history = createBrowserHistory();
function App() {
  const [error, setError] = useState()
  function fn() {
    console.log(window.a.b);
  }
  return (
    <Router history={history}>
      <>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/user/1">User1</Link>
            </li>
            <li>
              <Link to="/user/2">User2</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about" children={
            () => <div>about</div>
          } />
          <Route path="/user/:id" children={
            () => <div>user</div>
          } />
          <Route exact path="/" children={
            () => <>
              {error && new Error('error')}
              <button onClick={() => setError(true)}>set error</button>
              <button onClick={() => store.dispatch({ type: 'SET_A' })}>dispatch SET_A</button>
              <button onClick={() => store.dispatch({ type: 'SET_B' })}>dispatch SET_B</button>
              <button onClick={() => store.dispatch({ type: 'SET_C' })}>dispatch SET_C</button>
              <button onClick={fn}>Break the world</button>
            </>
          } />
        </Switch>
      </>
    </Router>
  );
}

export default App;